<template>
  <div class="app-container">
    <el-card>
      <div class="search-input-group">
        <el-form :model="searchForm" :inline="true">
          <el-form-item style="padding:5px" label="学号/工号">
            <el-input 
              v-model="searchForm.studentId" 
              placeholder="请输入学号/工号" 
              clearable
            />
          </el-form-item>
          <el-form-item style="padding:5px" label="用户编号">
            <el-input 
              v-model="searchForm.userId" 
              placeholder="请输入用户编号" 
              clearable
            />
          </el-form-item>
          <el-form-item style="padding:5px" label="高校代码">
            <el-input 
              v-model="searchForm.universityCode" 
              placeholder="请输入高校代码" 
              clearable
            />
          </el-form-item>
          <el-form-item style="padding:5px" label="用户名">
            <el-input 
              v-model="searchForm.username" 
              placeholder="请输入用户名" 
              clearable
            />
          </el-form-item>
          <el-form-item style="padding:5px" label="高校名称">
            <el-input 
              v-model="searchForm.universityName" 
              placeholder="请输入高校名称" 
              clearable
            />
          </el-form-item>
          <el-form-item style="padding:5px" label="审核状态">
            <el-select v-model="searchForm.dataStatus" placeholder="请选择审核状态" style="width: 150px;" clearable>
              <el-option label="待审核" :value="0" />
              <el-option label="已通过" :value="1" />
              <el-option label="已驳回" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button @click="handleResetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="btn-group">
        <el-button 
          v-if="btnGroup.editb" 
          type="success" 
          :icon="Edit"
          @click="showAuditDialog"
          :disabled="multipleSelection.length !== 1"
        >
          审核
        </el-button>
      </div>
      
      <el-table 
        :data="dataList" 
        style="width: 100%" 
        row-key="id"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="40" />
        <el-table-column type="index" label="序号" width="80" show-overflow-tooltip/>
        <el-table-column prop="studentId" label="学号/工号" width="150" show-overflow-tooltip/>
        <el-table-column prop="userId" label="用户编号" width="150" show-overflow-tooltip/>
        <el-table-column prop="username" label="用户名" width="120" show-overflow-tooltip/>
        <el-table-column prop="universityCode" label="高校代码" width="120" show-overflow-tooltip/>
        <el-table-column prop="universityName" label="高校名称" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="dataStatus" label="审核状态" width="100" show-overflow-tooltip>
          <template #default="scope">
            <el-text v-text="getStatusText(scope.row.dataStatus)"></el-text>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" show-overflow-tooltip/>
        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip/>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        background
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </el-card>
    
    <!-- 学生审核对话框 -->
    <el-dialog
      title="学生身份审核"
      v-model="auditDialogVisible"
      width="600px"
    >
      <el-form
        :model="auditData"
        label-width="120px"
        label-position="left"
        disabled
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="学号/工号:">
              <span>{{ auditData.studentId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户编号:">
              <span>{{ auditData.userId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名:">
              <span>{{ auditData.username }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态:">
              <span>{{ getStatusText(auditData.dataStatus) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="高校代码:">
              <span>{{ auditData.universityCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高校名称:">
              <span>{{ auditData.universityName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请时间:">
              <span>{{ auditData.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间:">
              <span>{{ auditData.updateTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <el-form
        :rules="auditFormRules"
        ref="auditFormRef"
        label-width="120px"
        style="margin-top: 20px;"
      >
        <el-form-item label="审核描述" prop="auditDesc">
          <el-input 
            v-model="auditForm.auditDesc" 
            type="textarea"
            placeholder="请输入审核描述"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="success" @click="submitAudit(1)">通过</el-button>
          <el-button type="danger" @click="submitAudit(2)">驳回</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Edit, Search } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from "vue"
import { getStudentAuditList, auditStudent } from "@/api/admin/studentAudit"

// 搜索表单数据
const searchForm = reactive({
  studentId: '',
  userId: '',
  universityCode: '',
  username: '',
  universityName: '',
  dataStatus: 0 // 默认查询待审核状态
})

// 固定参数源
const dataList = ref([])
const multipleSelection = ref([])
const isSearch = ref(false)
const btnGroup = reactive({
  editb: true
})
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 获取学生审核列表数据
const getDataList = () => {
  let res = getStudentAuditList({...searchForm}, pagination.currentPage)
  res.then(res => {
    dataList.value = res.data?.records || []
    // 处理操作权限
    let opeStr = res.operateStr || '*'
    if(opeStr.includes("*") || opeStr.includes("u")) btnGroup.editb = true
    pagination.total = res.data?.total || 0
    pagination.pageSize = res.data?.size || 10
    pagination.currentPage = res.data?.current || 1
  })
}

// 搜索学生审核数据
const handleSearch = () => {
  isSearch.value = true
  let res = getStudentAuditList({...searchForm}, pagination.currentPage)
  res.then(res => {
    dataList.value = res.data?.records || []
    pagination.total = res.data?.total || 0
    pagination.pageSize = res.data?.size || 10
    pagination.currentPage = res.data?.current || 1
  })
}

const handleResetSearch = () => {
  searchForm.studentId = ""
  searchForm.userId = ""
  searchForm.universityCode = ""
  searchForm.username = ""
  searchForm.universityName = ""
  searchForm.dataStatus = 0
  isSearch.value = false
  getDataList()
}

const handleSelectionChange = (selection) => {
  multipleSelection.value = selection
}

// 当前页改变时触发
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  refreshList()
}

const refreshList = () => {
  if (isSearch.value) handleSearch()
  else getDataList()
}

// 审核对话框相关变量
const auditDialogVisible = ref(false)
const auditFormRef = ref(null)
const auditData = ref({})

// 审核表单
const auditForm = reactive({
  auditDesc: ''
})

// 审核表单验证规则
const auditFormRules = {
  auditDesc: [
    { required: true, message: '请输入审核描述', trigger: 'blur' }
  ]
}

// 显示审核对话框的方法
const showAuditDialog = () => {
  if (multipleSelection.value.length === 1) {
    auditData.value = { ...multipleSelection.value[0] }
    auditForm.auditDesc = ''
    auditDialogVisible.value = true
  }
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已驳回'
  }
  return statusMap[status] || '未知状态'
}

// 提交审核
const submitAudit = async(status) => {
  // 驳回时需要验证审核描述
  if (status === 2 && !auditForm.auditDesc.trim()) {
    auditFormRef.value?.validateField('auditDesc')
    return
  }
  
  const auditParams = {
    id: auditData.value.id,
    dataStatus: status,
    auditDesc: auditForm.auditDesc,
    auditBy: '管理员' // 实际应用中应该从登录用户信息中获取
  }
  
  console.log('审核参数:', auditParams)
  // 调用实际的审核API
  await auditStudent(auditParams)
  auditDialogVisible.value = false
  refreshList()
}

onMounted(() => {
  getDataList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.btn-group {
  margin-bottom: 15px;
}

.btn-group .el-button {
  margin-right: 1px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.search-input-group {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-input-group .el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}

.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 90px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>